fix : handled checkbox and radio button check on press enter#957
Closed
speshkar-c-eightfold wants to merge 13 commits intoEightfoldAI:mainfrom
Closed
fix : handled checkbox and radio button check on press enter#957speshkar-c-eightfold wants to merge 13 commits intoEightfoldAI:mainfrom
speshkar-c-eightfold wants to merge 13 commits intoEightfoldAI:mainfrom
Conversation
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. |
ypatadia-eightfold
requested changes
Mar 17, 2025
ypatadia-eightfold
requested changes
May 27, 2025
src/components/CheckBox/CheckBox.tsx
Outdated
Comment on lines
185
to
189
| setIsChecked((prev) => !prev); | ||
| onChange?.({ | ||
| ...(e as any), | ||
| currentTarget: { checked: !target.checked }, | ||
| }); |
Collaborator
There was a problem hiding this comment.
can't we resuse toggleChecked()?
Comment on lines
175
to
180
| const target = e.target as HTMLInputElement; | ||
| setIsActive((prev) => !prev); | ||
| onChange?.({ | ||
| ...(e as any), | ||
| currentTarget: { checked: !target.checked }, | ||
| }); |
Collaborator
There was a problem hiding this comment.
can't we resuse toggleChecked()?
ypatadia-eightfold
requested changes
Jun 4, 2025
| const target = e.target as HTMLInputElement; | ||
| setIsActive((prev) => !prev); | ||
| onChange?.({ | ||
| ...(e as any), |
Comment on lines
+183
to
201
| const applyCheckedState = (checked: boolean) => { | ||
| setIsChecked(checked); | ||
| onChange?.({ | ||
| target: { checked, type: 'checkbox' } as HTMLInputElement, | ||
| currentTarget: { checked, type: 'checkbox' } as HTMLInputElement, | ||
| type: 'change', | ||
| } as React.ChangeEvent<HTMLInputElement>); | ||
| }; | ||
|
|
||
| const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>): void => { | ||
| if (e.key === 'Enter' || e.key === ' ') { | ||
| e.preventDefault(); | ||
| applyCheckedState(!isChecked); | ||
| } | ||
| }; | ||
|
|
||
| const toggleChecked = (e: React.ChangeEvent<HTMLInputElement>): void => { | ||
| setIsChecked(e.target.checked); | ||
| onChange?.(e); | ||
| applyCheckedState(e.target.checked); | ||
| }; |
Collaborator
There was a problem hiding this comment.
const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>): void => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
const syntheticEvent = {
...e,
currentTarget: {
...e.currentTarget,
checked: !isChecked,
} as HTMLInputElement,
target: {
...e.target,
checked: !isChecked,
} as HTMLInputElement,
} as React.ChangeEvent<HTMLInputElement>;
setIsChecked(!isChecked);
onChange?.(syntheticEvent);
}
};
const toggleChecked = (e: React.ChangeEvent<HTMLInputElement>): void => {
setIsChecked(e.target.checked);
onChange?.(e);
};
Collaborator
There was a problem hiding this comment.
can you please test these out. This implmentation for checkbox and radio ensures consistent implementation across both components.
Comment on lines
+163
to
194
| const applyRadioChange = ( | ||
| value: string, | ||
| e: React.SyntheticEvent<HTMLInputElement> | ||
| ) => { | ||
| if (!radioGroupContext) { | ||
| setSelectedValue(e.currentTarget?.value as RadioButtonValue); | ||
| setSelectedValue(value as RadioButtonValue); | ||
| } else { | ||
| radioGroupContext?.onChange?.(e); | ||
| radioGroupContext.onChange?.(e as React.ChangeEvent<HTMLInputElement>); | ||
| } | ||
|
|
||
| onChange?.(e); | ||
| onChange?.(e as React.ChangeEvent<HTMLInputElement>); | ||
| }; | ||
|
|
||
| const toggleChecked = (e: React.ChangeEvent<HTMLInputElement>): void => { | ||
| applyRadioChange(e.currentTarget.value, e); | ||
| }; | ||
|
|
||
| const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>): void => { | ||
| if (e.key === 'Enter' || e.key === ' ') { | ||
| const target = e.target as HTMLInputElement; | ||
|
|
||
| setIsActive((prev) => !prev); | ||
|
|
||
| const syntheticEvent = { | ||
| ...e, | ||
| currentTarget: target, | ||
| target: target, | ||
| } as unknown as React.ChangeEvent<HTMLInputElement>; | ||
|
|
||
| applyRadioChange(target.value, syntheticEvent); | ||
| } | ||
| }; |
Collaborator
There was a problem hiding this comment.
const toggleChecked = (e: React.ChangeEvent<HTMLInputElement>): void => {
if (!radioGroupContext) {
setSelectedValue(e.currentTarget?.value as RadioButtonValue);
} else {
radioGroupContext?.onChange?.(e);
}
onChange?.(e);
};
const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>): void => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
const syntheticEvent = {
...e,
currentTarget: {
...e.currentTarget,
checked: true,
value: value,
} as HTMLInputElement,
target: {
...e.target,
checked: true,
value: value,
} as HTMLInputElement,
} as React.ChangeEvent<HTMLInputElement>;
toggleChecked(syntheticEvent);
}
};
Contributor
Author
|
Closing this PR as checkboxes should not be handled on Enter key press whereas radio buttons work as expected . Moving these tickets to QA testing . |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
SUMMARY:
checkboxes and radio buttons were not accessible on enter button
GITHUB ISSUE (Open Source Contributors)
JIRA TASK (Eightfold Employees Only):
https://eightfoldai.atlassian.net/browse/ENG-116412
https://eightfoldai.atlassian.net/browse/ENG-116416
CHANGE TYPE:
TEST COVERAGE:
TEST PLAN:
Test Case 1 :
Go to storybook check if checkboxes are getting checked and unchecked on press Enter key
Screen.Recording.2025-03-06.at.3.54.55.PM.mov
Test Case 2 :
Chcek if radio Buttons are getting checked on enter key press
Screen.Recording.2025-03-06.at.3.56.09.PM.mov